import React, { Component } from 'react';
import { Carousel } from 'react-bootstrap';

class HomeCarousel extends Component {
	constructor(props) {
    super(props);
    this.state = { 
      Carousels: []
    };
  }

	get_carousel_data() {
    return [
       {src: './images/00001.JPG', title: 'aaa'},
       {src: './images/00002.JPG', title: 'bbb'}
    ]
	}

	componentDidMount() {
		this.setState({
			Carousels: this.get_carousel_data()
		})
	}

	render() {
		return(
			<div>
				<Carousel>
          {
          	this.state.Carousels.map(function (item, index) {
              return (
                <Carousel.Item key={index} style={{'height': '600px'}}>
                  <img width={'100%'} height={'100px'} alt="1920x600" src={item.src} />
                   <Carousel.Caption>
                      <h3>{item.title}</h3>
                    </Carousel.Caption>
                </Carousel.Item>
            	)
          	})
          }
				</Carousel>
			</div>
		)
	}
}

export default HomeCarousel